<script setup lang="ts">
import CreateAreaBox from "@/views/Student/personal/component/create-area-box.vue";
import {useRouter} from "vue-router";
import { DeleteOutlined } from "@ant-design/icons-vue"
import {reactive} from "vue";

const router = useRouter()
const columns:Array<{
  title:string,
  dataIndex: string;
  key: string;
  align?: 'right'|'center'|'left';
  width?: string|number;
}> = [
  {
    title: '模型名称',
    dataIndex: 'name',
    key: 'model-name',
    align: 'center',
  },
  {
    title: '日期记录',
    dataIndex: 'time',
    key: 'model-history',
    align: 'center',
  },
  {
    title: '模型评分',
    dataIndex: 'score',
    key: 'model-score',
    align: 'center',
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'active',
    key: 'model-active',
    width: 200
  },
  {
    title: '删除记录',
    align: 'center',
    dataIndex: 'del',
    key: 'model-del',
    width: 200
  },
]
interface IDataItem {
  key:string;
  name: string;
  time: string;
  score: string;
}
let tableData:Array<IDataItem> = [
  {
    key:'1',
    name:'线性回归',
    time:'2024-07-23 14:35:32',
    score: 'MSE: 0.181 , R2: 0.792'
  },
  {
    key:'1',
    name:'线性回归',
    time:'2024-07-29 15:25:45',
    score: 'MSE: 0.041 , R2: 0.679'
  },
  {
    key:'1',
    name:'逻辑回归',
    time:'2024-08-19 19:22:15',
    score: 'MSE: 0.141 , R2: 0.449'
  },
  {
    key:'1',
    name:'随机森林',
    time:'2024-08-22 15:33:12',
    score: 'MSE: 0.342 , R2: 0.618'
  },
  {
    key:'1',
    name:'支持向量机',
    time:'2024-08-30 17:32:33',
    score: 'MSE: 0.068 , R2: 0.891'
  }
]
const pagination = reactive<IPageInfo>({
  onChange: (page: number,pageSize) => {
    pagination.pageNum = page
    pagination.pageSize = pageSize
  },
  pageNum:1,
  pageSize: 8,
  total: 0,
  hideOnSinglePage: true,
  pageSizeOptions:['10', '20', '30', '40']
});
const handleSeeModelClick = (param:IDataItem) => {
  console.log(param)
  router.push('/show-model/'+param.name)
}
const handleDownloadClick = (param:IDataItem) => {
  console.log(param)
}
const HandleDelModelHistoricalClick = (param:IDataItem) => {
  console.log(param)
}
</script>

<template>
  <CreateAreaBox title="历史模型回顾" background="rgb(72, 99, 153)">
    <a-table :columns="columns" size="middle" :data-source="tableData" :pagination="pagination">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'model-active'">
          <a-button type="link" @click="handleSeeModelClick(record)">查看</a-button>
          <a-divider type="vertical" />
          <a-button type="link" @click="handleDownloadClick(record)">下载</a-button>
        </template>
        <template v-if="column.key === 'model-del'">
          <DeleteOutlined @click="HandleDelModelHistoricalClick(record)" class="del-icon"/>
        </template>
      </template>
    </a-table>
  </CreateAreaBox>
</template>

<style scoped lang="scss">
  .del-icon{
    font-size: 18px;
    cursor: pointer;
    color: rgb(81, 81, 81);
  }
</style>
